<template>
<div class="input-group search-field-wrapper">
  <input class="input-group-field" type="text" :placeholder="$t(placeholder)" v-model="searchTxt" />
  <et-icon v-if="!searchTxt || searchTxt.trim().length === 0" :name="searchIcon" />
  <a v-else @click="clearTxt">
    <et-icon :name="clearIcon"  />
  </a>
</div>
</template>

<script>
import { EtIcon } from '../../widgets';

export default {

  components: {
    EtIcon
  },

  props: {
    placeholder: {
      type: String,
      default: ''
    },
    searchIcon: {
      type: String,
      default: 'search'
    },
    clearIcon: {
      type: String,
      default: 'delete'
    },
    handler: {
      type: Function
    }
  },

  watch: {
    searchTxt(val) {
      this.handler(val);
    }
  },

  data() {
    return {
      searchTxt: null
    };
  },

  methods: {
    clearTxt() {
      this.searchTxt = null;
      this.handler(null);
    }
  }

};
</script>
